<template>
  <!--  定时任务-->
  <div class="user-manage">
    <div class="user-main">
      <div class="search-container">
        <el-form
          ref="ruleFormRef"
          :model="queryParams.entity"
          label-width="80"
          inline
        >
          <el-form-item label="任务名称" prop="scheduleName">
            <el-input
              v-model="queryParams.entity.scheduleName"
              maxlength="60"
              placeholder="请输入任务名关键字"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="Search"
              @click="handleQuery"
            >
              搜索
            </el-button>
            <el-button icon="Refresh" @click="handleResetQuery">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-card shadow="never" class="table-container">
        <template #header>
          <div
            style="
                            display: flex;
                            justify-content: flex-start;
                            width: 100%;
                        "
          >
            <el-button
              type="success"
              icon="Plus"
              @click="handleOpenAuthorDrawer"
            >
              发布新版
            </el-button>
          </div>
        </template>
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          highlight-current-row
          border
        >
          <el-table-column
            v-for="(item, index) in columnData"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            min-width="120"
            :width="item.width || ''"
            :fixed="item.fixed || false"
            show-overflow-tooltip
            :resizable="false"
            align="center"
          >
            <template #default="{ row }">
              <span>{{ row[item.prop] }}</span>
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="handleQuery"
        />
      </el-card>
    </div>
  </div>
  <!-- 新增版本 -->
  <AddTimeList :userParams="authorParams" @close="handleCloseAuthorDrawer">
  </AddTimeList>
<!--  &lt;!&ndash;  编辑&ndash;&gt;-->
</template>
<script setup>
defineOptions({ name: 'ScanCode' })
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Pagination from '@/components/Pagination.vue'
import AddTimeList from './addtimelist.vue'
import  {postList} from './api'


// 引入全局化储存
import { userStore } from '../../store/index'
const store = userStore()
const authorParams = reactive({ visible: false })
// 打开授权弹框
const handleOpenAuthorDrawer = (row) => {
  authorParams.row = row
  authorParams.visible = true
}
// 关闭授权弹窗
const handleCloseAuthorDrawer = (type) => {
  authorParams.visible = false
  if (type) handleQuery()
}
const tableLoading = ref(false)
const queryParams = reactive({
  entity: { name: '' },
  pageNo: 1,
  pageSize: 15
})
const total = ref(0)
const columnData = ref([
  {
    label: 'APK名称',
    prop: 'name'
  },
  {
    label: 'APK版本号',
    prop: 'version',
  },
  {
    label: '描述',
    prop: 'description',
  },
  {
    label: '上传时间',
    prop: 'createTime'
  }
])
const tableData = ref([])
const ruleFormRef = ref(null)

// 获取数据
const handleQuery =  async () => {
  tableLoading.value = true
  const res = await postList(queryParams)
  tableLoading.value = false
  if (res?.code === 200) {
    tableData.value = res.data.records || []
    total.value = res.total || 0
  }
}

// 重置表单
const handleResetQuery = () => {
  ruleFormRef.value.resetFields()
  queryParams.pageNo = 1
  handleQuery()
}

// 初始化
onMounted(() => {
  handleQuery()
})
</script>
<style lang="scss" scoped>
.user-manage {
  display: flex;
  height: 100%;

  .tree-main {
    width: 200px;
    background: #fff;
    padding: 10px;
  }

  .user-main {
    flex: 1;
    width: 0;
    margin-left: 10px;
  }
}
</style>
